<!--
 * @Author: your name
 * @Date: 2022-04-11 12:54:50
 * @LastEditTime: 2022-04-17 23:31:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /vue/src/pages/Login/Login.vue
-->
<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {ref} from "vue";
import {ElMessage} from "element-plus";
import { getMsg } from '@/http/api/login';

const router = useRouter();
const userName = ref('')
const pwd = ref('')

const login = () => {
  if (userName.value === 'admin' && pwd.value === 'admin') {
    ElMessage({type: "success", message: '登录成功'})
    router.push('/main')
  } else if (userName.value === '' && pwd.value === '') {
    ElMessage({type: "error", message: '请输入用户名和密码'})
  } else {
    ElMessage({type: "error", message: '用户名或密码输入错误'})
  }

  return {
    userName:userName.value,
    pwd:pwd.value,
  }
}
</script>
<template>
  <div class="login">
    <img src="@/assets/logo.png" alt="">
    <el-input class="login-input" v-model="userName" placeholder="输入用户名" clearable/>
    <el-input class="login-input" type="password" v-model="pwd" placeholder="输入密码"
              @keydown="(e:any)=>e.code === 'Enter'?login():''" clearable/>
    <el-button @click="login()">点击登录,跳转首页</el-button>

  </div>

</template>
<style scoped>
.login {
  margin: 0 auto;
  width: 300px;
  height: 800px;
}

.login-input {
  width: 200px;
  margin: 10px;
}

</style>
